<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>PhotoSwipe的运用</title>
	<link rel="stylesheet" href="lib/photoswipe/photoswipe.css">
	<link rel="stylesheet" href="lib/photoswipe/default-skin/default-skin.css">
</head>
<body>
photo_swipe运用

<button id="btn">Open PhotoSwipe</button>

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="pswp__bg"></div>
	<div class="pswp__scroll-wrap">
		<div class="pswp__container">
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
			<div class="pswp__item"></div>
		</div>
		<div class="pswp__ui pswp__ui--hidden">
			<div class="pswp__top-bar">
				<div class="pswp__counter"></div>
				<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
				<button class="pswp__button pswp__button--share" title="Share"></button>
				<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
				<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
				<div class="pswp__preloader">
					<div class="pswp__preloader__icn">
						<div class="pswp__preloader__cut">
							<div class="pswp__preloader__donut"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
				<div class="pswp__share-tooltip"></div>
			</div>
			<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
			<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
			<div class="pswp__caption">
				<div class="pswp__caption__center"></div>
			</div>
		</div>
	</div>
</div>
<script src="lib/vue.js"></script>
<script src="lib/photoswipe/photoswipe.js"></script>
<script src="lib/photoswipe/photoswipe-ui-default.js"></script>
<script>
  var openPhotoSwipe = function () {
    var pswpElement = document.querySelectorAll('.pswp')[0]
    
    // build items array
    var items = [
      {
        src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
        w: 964,
        h: 1024,
        pid: 33333,
		title:'图片1介绍',
      },
      {
        src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
        w: 1024,
        h: 683,
        pid: 2222,
		title:'图片2介绍',
      }
    ]
    
    // define options (if needed)
    var options = {
      index: 2,
      showAnimationDuration: 0,
      hideAnimationDuration: 0
    }
    console.log('执行一次')
    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options)
    gallery.init()
  }
  
  // openPhotoSwipe()
  
  document.getElementById('btn').onclick = openPhotoSwipe
</script>
</body>
</html>